import styled from 'styled-components'

/*

clickButton={this.onClickButton}//点击事件
selected = {this.state.selected}//是否选择
width="200px" 
height="200px"
padding="5px"
margin="10px"
backgroundImage={qd}
backgroundColor='blue'
selectedBackgroundImage={xsrw}
selectedBackgroundColor='red'
// border='3px solid #000'
// selectedBorder = '5px solid yellow'
tag={100}
borderWidth='0 0 2px 0 '
borderStyle = 'solid'
borderColor = '#000'

selectedBorderWidth ='5px'
selectedBorderStyle = 'double'
selectedBorderColor = 'yellow'
borderRadius='35px'
selectedBorderRadius='15px'
// borderBottom
// borderRight

img={fbrw} 
selectedImg={xsrw} 
imgWidth = '50px'
imgHeight = '65px'
imgRadius="10px"
selectedImgRadius="20px"
imgPadding='5px 0 10px'
imgMargin = '10px 0 20px'
imgBackgroundColor="green"
selectedImgBackgroundColor="yellow"
imgGrow = '0'
imgShrink = '0'
imgPosition='top'
titleWidth = '80px'
titleHeigh ='20px'
titleGrow = '0'
titleShrink = '1'
titleLineHeight = '12px'
titlePadding = '4px 0'
titleTextAlign = 'center'
title = '发布任务'
selectedTitle = '取消任务'
titleColor = '#fff'
selectedTitleColor = 'black'
titleSize = '18px'
selectedTitleSize = '12px'
titleBackColor = '#ddd'

titleBorder = '0 0 5px 0 solid red'
titleBorderWidth='0 0 2px 0 '
titleBorderStyle = 'solid'
titleBorderColor = '#000'
selectedTitleBorder
selectedTitleBorderWidth='0 0 2px 0 '
selectedTitleBorderStyle = 'solid'
selectedTitleBorderColor = '#000'

selectedTitleBackColor = 'yellow'    
titleWordWrap = {true}

*/ 
const ButtonStyled = styled.div `

/* background-image: url('${props => props.backgroundImage}'); */
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  width : ${props => props.width};
  height :${props => props.height};
  padding :${props => props.padding};
  margin: ${props => props.margin};
  opacity: ${props => {
    if(props.selected){
      return props.selectedOpacity?props.selectedOpacity:(props.opacity||1)
    }else{
      return (props.opacity||1)
    }
  }};
  background-image: url('${(props) =>{if(props.selected){return props.selectedBackgroundImage?props.selectedBackgroundImage:props.backgroundImage}else{return props.backgroundImage}}}');
  
  background-repeat: no-repeat;
  background-position-y: top;
  background-position-x: left;
  background-size: 100% 100%;
  vertical-align: top;
  background-color :${props => {
    if(props.selected){
      return props.selectedBackgroundColor?props.selectedBackgroundColor:props.backgroundColor
    }else{
      return props.backgroundColor
    }
  }};
  border-bottom :${props => props.borderBottom};
  border-right :${props => props.borderRight};

  border:${props => {
    if(props.selected){
      return props.selectedBorder?props.selectedBorder:props.border
    }else{
      return props.border
    }
  }};
  border-width :${props => {
    if(props.selected){
      return props.selectedBorderWidth?props.selectedBorderWidth:props.borderWidth
    }else{
      return props.borderWidth
    }
  }};
  border-style :${props => {
    if(props.selected){
      return props.selectedBorderStyle?props.selectedBorderStyle:props.borderStyle
    }else{
      return props.borderStyle
    }
  }};
  border-color :${props => {
    if(props.selected){
      return props.selectedBorderColor?props.selectedBorderColor:props.borderColor
    }else{
      return props.borderColor
    }
  }};
  overflow: hidden;
  border-radius: ${props => {
    if(props.selected){
      return props.selectedBorderRadius?props.selectedBorderRadius:props.borderRadius
    }else{
      return props.borderRadius
    }
  }};

  div.btnMain{
    display : flex;
    flex-direction : ${
      (props)=>{
        if(props.imgPosition==="bottom"){
          return "column-reverse";
        }else if(props.imgPosition === "left"){
          return "row";
        }else if(props.imgPosition === "right"){
          return "row-reverse";
        }else{
          return "column";
        }
      }
    };
    justify-content : center;
    align-items: center;
    width: 100%;
    height : 100%;
    overflow: hidden;
    
    img.btnImg{
      width: ${props => props.imgWidth?props.imgWidth:props.width};
      height: ${props => props.imgHeight?props.imgHeight:props.height};
      padding: ${props => props.imgPadding};
      margin: ${props => props.imgMargin};
      border-radius:${props => {
        if(props.selected){
          return props.selectedImgRadius?props.selectedImgRadius:props.imgRadius
        }else{
          return props.imgRadius
        }
      }};
      background-color: ${props => {
        if(props.selected){
          return props.selectedImgBackgroundColor?props.selectedImgBackgroundColor:props.imgBackgroundColor
        }else{
          return props.imgBackgroundColor
        }
      }};
      flex-shrink : ${props => {
        if(props.imgShrink){
          return props.imgShrink
        }else{
          return 1
        }}
      };
      flex-grow : ${props => {
        if(props.imgGrow){
          return props.imgGrow
        }else{
          return 1
        }}
      };
    }
    p.btnNum{
      width:${props => props.numWidth?props.numWidth:(props.width?'100%':'')};
      height: ${props => props.numHeigh?props.numHeigh:(props.height?props.height:'')};
      line-height: ${
        props => {
          if(props.numLineHeight){
            return props.numLineHeight
          }else{
            return props.numHeigh?props.numHeigh:(props.height?props.height:'')
          }
        }
      };
      text-align : ${props => props.titleTextAlign?props.titleTextAlign:'center'};
      font-size : ${props => {
        if(props.selected){
          return props.selectedNumSize?props.selectedNumSize:props.numSize
        }else{
          return props.numSize
        }
      }};
      color: ${props => {
        if(props.selected){
          return props.selectedNumColor?props.selectedNumColor:props.numColor
        }else{
          return props.numColor
        }
      }};
    }
    p.btnTitle{
      width:${props => props.titleWidth?props.titleWidth:(props.width?'100%':'')};
      height: ${props => props.titleHeigh?props.titleHeigh:(props.height?props.height:'')};
    
      border:${props => {
        if(props.selected){
          return props.selectedTitleBorder?props.selectedTitleBorder:props.titleBorder
        }else{
          return props.titleBorder
        }
      }};
      border-width :${props => {
        if(props.selected){
          return props.selectedTitleBorderWidth?props.selectedTitleBorderWidth:props.titleBorderWidth
        }else{
          return props.titleBorderWidth
        }
      }};
      border-style :${props => {
        if(props.selected){
          return props.selectedTitleBorderStyle?props.selectedTitleBorderStyle:props.titleBorderStyle
        }else{
          return props.titleBorderStyle
        }
      }};

      border-color :${props => {
        if(props.selected){
          return props.selectedTitleBorderColor?props.selectedTitleBorderColor:props.titleBorderColor
        }else{
          return props.titleBorderColor
        }
      }};
      line-height: ${
        props => {
          if(props.titleLineHeight){
            return props.titleLineHeight
          }else{
            return props.titleHeigh?props.titleHeigh:(props.height?props.height:'')
          }
        }
      };
      padding :${props => props.titlePadding};
      flex-shrink : ${props => {
        if(props.titleShrink){
          return props.titleShrink
        }else{
          return 1
        }}
      };
      flex-grow : ${props => {
        if(props.titleGrow){
          return props.titleGrow
        }else{
          return 1
        }}
      };
      text-align : ${props => props.titleTextAlign?props.titleTextAlign:'center'};
      font-size : ${props => {
        if(props.selected){
          return props.selectedTitleSize?props.selectedTitleSize:props.titleSize
        }else{
          return props.titleSize
        }
      }};
      word-wrap: ${props => {
        if(props.titleWordWrap){ 
          return 'break-word'
        }else{ 
          return 'normal'
        }
      }};
      background-color: ${props => {
        if(props.selected){
          return props.selectedTitleBackColor?props.selectedTitleBackColor:props.titleBackColor
        }else{
          return props.titleBackColor
        }
      }};
      color: ${props => {
        if(props.selected){
          return props.selectedTitleColor?props.selectedTitleColor:props.titleColor
        }else{
          return props.titleColor
        }
      }};
    }
  }

`
export { ButtonStyled }